<template>
	<view>
		<!-- <swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
			<swiper-item class="swiper-item-wapper">
				<view class="swiper-item">
					<image src="../../../static/temp/home_banner-1.jpg" mode="scaleToFill" class="swiper-item-img"></image>
				</view>
			</swiper-item class="swiper-item-wapper">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../../static/temp/home_banner-2.jpg" mode="scaleToFill" class="swiper-item-img"></image>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item-wapper">
				<view class="swiper-item">
					<image src="../../../static/temp/home_banner-3.jpg" mode="scaleToFill" class="swiper-item-img"></image>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item-wapper">
				<view class="swiper-item">
					<image src="../../../static/temp/home_banner-4.jpg" mode="scaleToFill" class="swiper-item-img"></image>

				</view>
			</swiper-item>
		</swiper> -->
		<!-- <image src="../../../static/temp/home_banner-4.jpg" mode="scaleToFill" class="swiper-item-img"></image> -->
		<wux-popup closable :visible="visible1" title="Delete" content="Are you sure???" @close="onClose1" @closed="onClosed1">
			<view slot="footer" class="popup__button" bindtap="close1">OK</view>
		</wux-popup>

		<wux-popup position="bottom" :visible="visible2" @close="onClose2">
			<wux-cell-group title="Your fathers">
				<wux-cell hover-class="none" title="Jack Ma"></wux-cell>
				<wux-cell hover-class="none" title="Pony"></wux-cell>
				<wux-cell hover-class="none">
					<wux-button block type="balanced" @click="close2">Yes</wux-button>
				</wux-cell>
			</wux-cell-group>
		</wux-popup>

		<view class="page">
			<view class="page__hd">
				<view class="page__title">Popup</view>
				<view class="page__desc">弹出框</view>
			</view>
			<view class="page__bd page__bd_spacing">
				<wux-button block type="light" @click="open1">Default</wux-button>
				<wux-button block type="light" @click="open2">Popup</wux-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 visible1: false,
				visible2: false,
			};
		},
		methods:{
			 open1() {
				this.visible1 = true;
    },
    open2() {
       this.visible2 = true;
    },
    close1() {
        this.visible1 = false;
    },
    close2() {
        this.visible2 = false;
    },
    onClose(key) {
        console.log('onClose')
        this.setData({
            [key]: false,
        })
    },
    onClose1() {
        this.onClose('visible1')
    },
    onClose2() {
        this.onClose('visible2')
    },
    onClosed1() {
        console.log('onClosed')
    }
		}
		
	}
</script>

<style lang="scss">
	
</style>
